<style scoped>

  .el-form-item {
    margin-bottom: 18px !important;
  }

  .clearfix {
    display: flex;
    justify-content: space-between; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .el-card__header {
    padding: 10px 20px !important;
  }

  .ml-25 {
    margin-left: 40px;
  }

  .row >>> .el-divider--horizontal {
    margin: 10px 0;
  }

  .row >>> .el-card__header {
    padding: 8px 24px;
  }

  .row >>> .el-card {
    margin-top: 15px;
  }

  .row >>> .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .row >>> .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .uplold >>> .el-upload-list__item {
    transition: none;
  }

  .test {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    opacity: 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
  }

  .file_card >>> .el-upload-list__item-actions {
    height: 20%;
    font-size: 10px;
  }

  .file_card >>> .el-upload-list__item-thumbnail:hover .test {
    opacity: 1;
  }
</style>
<template>
  <div>
    <el-row :gutter="0">
      <el-col :span="17">
        <el-page-header @back="goBack" :content="addtitle" title="返回"></el-page-header>
      </el-col>
<div id="disablebut">
      <el-col :span="2">
        <el-button size="medium" type="success" plain icon="el-icon-finished" @click="Auditpass"
        >通过
        </el-button>
      </el-col>

      <el-col :span="2" style="margin-left: 10px">
        <el-button size="medium" type="success" plain icon="el-icon-finished" @click="reject"
        >退回
        </el-button>
      </el-col>

</div>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="10">
      <el-col :span="8" style="background-color: #fff">
        <el-radio-group v-model="form.parenttype" @change="gettype" class="ml-25  " :disabled="radio">
          <el-radio label="1">论文著作</el-radio>
          <el-radio label="2">项目</el-radio>
          <el-radio label="3">专利</el-radio>
          <el-radio label="4">其他</el-radio>
        </el-radio-group>

        <el-form ref="form" :model="form" label-width="100px" class="mt-10"
                 v-if="form.parenttype == '1'||form.parenttype == '4'">
          <el-form-item label="类型：">
            <span>{{form.type}}</span>
          </el-form-item>
          <el-form-item label="名称：">
            <span>{{form.title}}</span>
          </el-form-item>
          、
          <el-form-item label="负责人：">
            <span>{{form.username}}</span>
          </el-form-item>
          <el-form-item label="形式：">
            <span>{{form.form ==='1'? '个人':'组织'}}</span>
          </el-form-item>
          <el-form-item label="成员：" v-if="form.form=='2'">
            <span>{{form.member}}</span>
          </el-form-item>
          <el-form-item label="领域：">
            <span>{{form.field}}</span>

          </el-form-item>
          <el-form-item label="等级：">
            <span>{{form.grades}}</span>
            <!--grades-->
          </el-form-item>


          <el-form-item label="备注：">
            <span>{{form.remarks}}</span>

          </el-form-item>

        </el-form>
        <el-form ref="form" :model="form" label-width="100px" class="mt-10" v-if="form.parenttype == '2'">
          <el-form-item label="类型：">
            <span>{{form.type}}</span>
          </el-form-item>
          <el-form-item label="项目名称：">
            <span>{{form.title}}</span>
          </el-form-item>

          <el-form-item label="负责人：">
            <span>{{form.username}}</span>

          </el-form-item>
          <el-form-item label="形式：">
            <span>{{form.form ==='1'? '个人':'组织'}}</span>
          </el-form-item>
          <el-form-item label="成员：" v-if="form.form=='2'">
            <span>{{form.member}}</span>
          </el-form-item>
          <el-form-item label="项目领域：">
            <span>{{form.field}}</span>
          </el-form-item>
          <el-form-item label="项目等级：">
            <span>{{form.grades}}</span>
          </el-form-item>
          <el-form-item label="项目经费：">
            <span>{{form.funds}}</span>
          </el-form-item>

          <el-form-item label="项目描述：">
            <span>{{form.remarks}}</span>
          </el-form-item>

        </el-form>
        <el-form ref="form" :model="form" label-width="100px" class="mt-10" v-if="form.parenttype == '3'">
          <el-form-item label="类型：">
            <el-select v-model="form.type" placeholder="请选择成果类型" style="width: 100%">
              <el-option
                v-for="item in resultType"
                :key="item.rtId"
                :label="item.resultType"
                :value="item.rtId">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="专利名称：">
            <span>{{form.title}}</span>
          </el-form-item>
          <el-form-item label="发明人：">
            <span>{{form.username}}</span>
          </el-form-item>
          <el-form-item label="专利权人：">
            <span>{{form.patentee}}</span>
          </el-form-item>
          <el-form-item label="专利编号：">
            <span>{{form.patentNumber}}</span>
          </el-form-item>
          <el-form-item label="专利申请日：">
            <span>{{form.applydate}}</span>
          </el-form-item>
          <el-form-item label="项目描述：">
            <span>{{form.remarks}}</span>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="15" style="background-color: #fff">
        <el-row class="uplold">
          <el-col :span="24">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadUrl"
              multiple
              :limit="45"
              :file-list="fileList"
              :auto-upload="false">

            </el-upload>
          </el-col>
          <el-col :span="24" class="row">
            <el-card class="box-card" shadow="never">
              <div v-if="imgList.length <= 0" style="text-align: center;font-size: 15px;color: #8c939d">暂无任何文件</div>
              <div slot="header" class="clearfix">
                <span>已传附件</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="refreshFile">全部下载</el-button>
              </div>
              <!--        图片-->
              <ul class="el-upload-list el-upload-list--picture-card">
          <span v-for="img in imgList">
            <el-tooltip
              class="item"
              effect="light"
              :hide-after="2000"
              :content="img.name"
              placement="bottom-start">
            <li tabindex="0" class="el-upload-list__item is-ready"
                v-if="img.type=='jpg'|img.type=='png'|img.type=='jpeg'">
              <img class="el-upload-list__item-thumbnail" :src="img.url">
              <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="imgCheck(img.url)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="imgDonwload(img.url)">
                    <i class="el-icon-download"></i>
                  </span>
              </span>
            </li></el-tooltip>
          </span>
              </ul>
              <!--        文件file-->
              <span class="file_card">
            <ul class="el-upload-list el-upload-list--picture-card">
            <span v-for="img in imgList">
              <el-tooltip
                class="item"
                effect="dark"
                :hide-after="2000"
                :content="img.name"
                placement="bottom-start">
                <li tabindex="0" class="el-upload-list__item is-ready"
                    v-if="img.type=='docx'|img.type=='doc'|img.type=='xls'|img.type=='xlsx'">
                  <div class="demo-image__preview el-upload-list__item-thumbnail">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="img.fileImgUrl[0]"
                      :preview-src-list="img.fileImgUrl">
                    </el-image>
                    <span class="test" @click="fileDonwload(img.url)">
                      <i class="el-icon-download"></i>
                    </span>
                  </div>
                </li>
              </el-tooltip>
            </span>
          </ul>
          </span>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top: 40px;">
          <label><span>评语：</span></label>
          <el-input class="mt-5" type="textarea" v-model="comment" clearable placeholder="请输入类容" maxlength="450"
                    rows="6"
                    show-word-limit></el-input>


        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "addachievements",
    data() {
      return {
        imgList: [],
        role: this.$cookie.get("role"),
        uploadUrl: this.URL.api + "upload/file",
        addtitle: "添加成果",
        resultType: [],
        activeIndex: '1',
        radio: false,
        isedit: false,
        dialogImageUrl: '',

        comment: '',
        grades: [
          {id: "1", label: "社团"},
          {id: "1", label: "班级"},
          {id: "2", label: "院级"},
          {id: "3", label: "校级"},
          {id: "3", label: "县级"},
          {id: "4", label: "市级"},
          {id: "5", label: "省级"},
        ],
        fileList: [],
        dialogVisible: false,
        disabled: false,
        achid: "",
        form: {
          parenttype: "1",
          type: "",
          title: '',
          form: "1",
          username: "",
          member: "",
          grades: "",
          field: "",
          college: '',
          remarks: "",
          uid: "",
          patentee: "",
          patentNumber: "",
          applydate: "",
          clazzId: "",
          funds: '',
          uploadFileList: [],
        },
        LookFlag: "add",

      };
    },
    methods: {
      goBack() {
        //console.log('go back');
        this.$router.go(-1);
      },

      reject() {
        var self = this;
        var state = "";
        if (this.role >= 2000 && this.role < 2500) {
          if (this.form.grades + "" == "101") {
            //班级成果   通过直接通过
            state = "6";
          } else {
            //其他成果 多级审核
            state = "4";
          }

        } else if (this.role >= 2500 && this.role < 5000) {
          //院长审核
          if (this.form.grades + "" == "103") {
            //院级成果   通过直接通过
            state = "6";
          } else {
            //其他成果 多级审核
            state = "5";
          }

        }else{
          state = "6"
        }


        this.$http.put(this.URL.api + "achievement/updateAchState/"+ state+"/" + this.achid+"/"+this.form.grades, this.qs.stringify({comment: this.comment})).then(res => {
          if (res.data.flag) {
            this.$message.success("退回成功")
          }

        })
      },

      Auditpass() {
        //判断是老师还是院长
        var role = this.$cookie.get("role");
        //老师
        var state = "";
        if (this.role >= 2000 && this.role < 2500) {
          if (this.form.grades + "" == "101") {
            //班级成果   通过直接通过
            state = "3";
          } else {
            //其他成果 多级审核
            state = "1";
          }

        } else if (this.role >= 2500 && this.role < 5000) {
          //院长审核
          if (this.form.grades + "" == "103") {
            //院级成果   通过直接通过
            state = "3";
          } else {
            //其他成果 多级审核
            state = "2";
          }

        }else{
          state = "3"
        }
          this.$http.put(this.URL.api + "achievement/updateAchState/"+state+"/" + this.achid+ "/" + this.form.grades,
            this.qs.stringify({comment: this.comment})).then(res => {
            if (res.data.flag) {
              this.$message.success("审核成功")
            }
          });


      },


      gettype() {
        var self = this
        this.form.type = ""
        this.form.grades = ""
        this.$http.get(this.URL.api + "achievement/querybytypeid/" + self.form.parenttype).then(res => {
          self.resultType = res.data.data
        }).catch(res => {
        })
      },


      imgDonwload: function (img) {
        console.log("imgDonwload:" + img);
        window.location.href = this.URL.api + "upload/testDownload?file=" + img;
      },
      imgCheck(img) {
        console.log("imgCheck:" + img)
        this.dialogImageUrl = img;
        this.dialogVisible = true;
      },
      fileDonwload(img) {
        console.log("fileDonwload:" + img)
        window.location.href = img;
      },

      selAllFileImg: function () {

        var self = this;
        self.$http.post(self.URL.api + "upload/selAllFileUrlByUserId", self.qs.stringify({
          userId: this.form.uid,
          taskId: self.$route.query.id == undefined ? "add" : self.$route.query.id
        }))
          .then(function (response) {
            self.form.uploadFileList = [];
            self.imgList = response.data.data;
            self.imgList.forEach(re => {
              self.form.uploadFileList.push(re.fileId);
            })

            console.log(self.imgList)
          })


          .catch(function (error) {

          });

      },
      MyMessage(msg, type) {
        this.$message({
          message: msg,
          type: type
        });
      },
      refreshFile() {
        if (this.imgList.length != 0) {
          window.location.href = this.URL.api + "upload/Downloadbatch/" + this.form.uid + "/" + this.form.id + "/" + this.form.username;
          return;
        }
        this.$message.error("没有文件");

      },

    },
    mounted: function () { //mounted　表示这个 Vue 对象加载成功了\

      this.form.college = this.UserInfo.getUserInfo().college;
      this.form.clazzId = this.UserInfo.getUserInfo().clazzId
      var self = this;

      //校长不能提交上级
      var role = this.$cookie.get("role")

      //删除用户上传后没有保存的文件
      this.$http.delete(this.URL.api + "upload/deletefilebyUid/" + this.$cookie.get("userid")).then(res => {
      })

      if (this.$route.query.id != null) {
        var dataid = this.$route.query.id;
        this.achid = dataid;
        this.radio = true

        this.$http.get(this.URL.api + "achievement/querybytypeid/" + this.$route.query.parenttype).then(res => {
          self.resultType = res.data.data


          //根据id查询成果
          this.$http.get(this.URL.api + "achievement/queryAchById/" + dataid).then(res => {
            if (res.data.flag) {


              self.form = res.data.data.ach;
              self.form.uploadFileList = [];
              this.addtitle = "审核-- " + self.form.title

              if (this.$route.query.pass != null) {

                var  but =   document.getElementById("disablebut");
                but.style.display = "none"
                this.addtitle = "查看-- " + self.form.title
              }


              if (res.data.data.files.length !== 0) {
                for (let i = 0; i < res.data.data.files.length; i++) {
                  self.form.uploadFileList.push(res.data.data.files[i].id)
                }
              }
              self.resultType.forEach(function (item) {
                if (self.form.type+"" == item.rtId) {
                  self.form.type = item.resultType
                  return;
                }
              })

              self.grades.forEach(function (item) {
                console.log(item)
                if (self.form.grades == item.rtId) {
                  self.form.grades = item.grades
                }
              })


              //查询文件
              self.$http.post(self.URL.api + "upload/selAllFileUrlByUserId", self.qs.stringify(
                {
                  userId: self.form.uid,
                  taskId: self.$route.query.id == undefined ? "add" : self.$route.query.id
                }))
                .then(function (response) {
                  self.imgList = response.data.data;
                  self.fileList = self.imgList;
                })
                .catch(function (error) {
                });
            }
          })
        }).catch(res => {
        })


      }


      this.$http.get(this.URL.api + "achievement/queryalltype").then(res => {
        if (self.$route.query.id == null)
          this.resultType = res.data.data.type
        this.grades = res.data.data.grades


      }).catch(res => {
      })


    }
  }
</script>
